<%--
  Created by IntelliJ IDEA.
  User: ${USER}
  Date: ${DATE}
  Time: ${TIME}
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isErrorPage="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>地址管理</title>
    <base href="<%= basePath %>"/>
    <link href="<%= basePath %>static/business/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="<%= basePath %>static/business/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="<%= basePath %>static/business/css/personal.css" rel="stylesheet" type="text/css">
    <link href="<%= basePath %>static/business/css/addstyle.css" rel="stylesheet" type="text/css">

    <script src="<%= basePath %>static/business/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="<%= basePath %>static/business/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
</head>

<body>
<!--头 -->
<jsp:include page="header.jsp"/>

<div class="nav-table">
    <div class="long-title"><span class="all-goods">全部分类</span></div>
    <div class="nav-cont">
        <ul>
            <li class="index"><a href="#">首页</a></li>
            <li class="qc"><a href="#">闪购</a></li>
            <li class="qc"><a href="#">限时抢</a></li>
            <li class="qc"><a href="#">团购</a></li>
            <li class="qc last"><a href="#">大包装</a></li>
        </ul>
        <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
        </div>
    </div>
</div>
<b class="line"></b>

<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-address">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small>
                    </div>
                </div>
                <hr/>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">
                    <%-- 循环遍历consignee列表 --%>
                    <c:forEach var="cge" items="${consignees}">
                        <li class="user-addresslist ${ cge.isDefault == 1 ? 'defaultAddr' : '' }">
                                <%-- 判断是否为默认地址，并显示不同文本 --%>
                            <c:if test="${cge.isDefault == 1}">
                                <span class="new-option-r"><i class="am-icon-check-circle"></i>默认地址</span>
                            </c:if>

                            <c:if test="${cge.isDefault != 1}">
                                <span class="new-option-r"
                                      onclick="isDefaultAddr('${cge.customerAddrId}')"><i
                                        class="am-icon-check-circle"></i>设为默认</span>
                            </c:if>

                            <p class="new-tit new-p-re">
                                <input type="hidden" id="user_id" name="user_id" value="${ cge.customerAddrId }"/>
                                <span class="new-txt">${ cge.customerUsername}</span>
                                <span class="new-txt-rd2">${ cge.customerUserphone }</span>
                            </p>

                            <div class="new-mu_l2a new-p-re">
                                <p class="new-mu_l2cw">
                                    <span class="title">地址：</span>
                                    <span class="province">${ cge.province }</span>
                                    <span class="city">${ cge.city }</span>
                                    <span class="dist">${ cge.district }</span>
                                    <span class="street">${ cge.address}</span>
                                </p>
                            </div>
                            <div class="new-addr-btn">
                                    <%-- 调用openDialog()函数，并传递参数${cge.customerAddrId} --%>
                                <a href="javascript:void(0)" onclick="openDialog('${cge.customerAddrId}')">
                                    <i class="am-icon-edit"></i>编辑</a>
                                <span class="new-addr-bar">|</span>
                                    <%-- 调用delClick()函数，并传递参数${cge.customerAddrId} --%>
                                <a href="javascript:void(0)" onclick="delClick('${cge.customerAddrId}')">
                                    <i class="am-icon-trash"></i>删除</a>
                            </div>
                        </li>
                    </c:forEach>
                </ul>
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                <!--例子-->
                <div class="am-modal am-modal-no-btn" id="doc-modal-1">

                    <div class="add-dress">

                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> /
                                <small>Add&nbsp;address</small></div>
                        </div>
                        <hr/>

                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                            <form class="am-form am-form-horizontal" action="cntApi/addConsignee" method="post"
                                  name="consignee">
                                <input type="hidden" id="customerId" name="customerId"
                                       value="${onlineUser.customerId}"/>
                                <div class="am-form-group">
                                    <label for="user-name" class="am-form-label">收货人</label>
                                    <div class="am-form-content">
                                        <input type="text" id="user-name" name="customerUsername" placeholder="收货人">
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">手机号码</label>
                                    <div class="am-form-content">
                                        <input id="user-phone" name="customerUserphone" placeholder="手机号必填"
                                               type="text">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="user-address" class="am-form-label">所在地</label>
                                    <input type="hidden" id="user-address" value=""/>
                                    <div class="am-form-content address">
                                        <select id="province" name="province" data-am-selected>
                                            <option value="福建省">福建省</option>
                                            <option value="1">山东省</option>
                                            <option value="山东省">湖北省</option>
                                            <option value="江西省">江西省</option>
                                        </select>
                                        <select id="city" name="city" data-am-selected>
                                            <option value="福州市">福州市</option>
                                            <option value="泉州市">泉州市</option>
                                            <option value="厦门市">厦门市</option>
                                            <option value="漳州市">漳州市</option>
                                            <option value="济南市">济南市</option>
                                            <option value="青岛市">青岛市</option>
                                            <option value="烟台市">烟台市</option>
                                            <option value="淄博市">淄博市</option>
                                            <option value="武汉市">武汉市</option>
                                            <option value="襄阳市">襄阳市</option>
                                        </select>
                                        <select id="district" name="district" data-am-selected>
                                            <option value="晋安区">晋安区</option>
                                            <option value="闽侯区">闽侯区</option>
                                            <option value="历下区">历下区</option>
                                            <option value="历城区">历城区</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label for="user-intro" class="am-form-label">详细地址</label>
                                    <div class="am-form-content">
                                        <textarea class="" rows="3" id="user-intro"
                                                  name="address" placeholder="输入详细地址"></textarea>
                                        <small>100字以内写出你的详细地址...</small>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <div class="am-u-sm-9 am-u-sm-push-3">
                                        <input type="submit" class="am-btn am-btn-danger" value="保存">
                                        <a href="javascript: void(0)" class="am-close am-btn am-btn-danger"
                                           data-am-modal-close>取消</a>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                </div>

            </div>

            <script type="text/javascript">
                $(document).ready(function () {
                    $(".new-option-r").click(function () {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                    });

                    var $ww = $(window).width();
                    if ($ww > 640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }

                })
            </script>

            <div class="clear"></div>

        </div>
        <!--底部-->
        <div class="footer">
        </div>
    </div>
    <aside class="menu">
    </aside>
</div>

</body>
<script>
    $(function () {
        $(".nav-table").load("<%= basePath %>static//business/person/nav.jsp");
        $("div.footer").load("<%= basePath %>static//business/home/footer.jsp");
        $("aside").load("<%= basePath %>static//business/home/aside.jsp");
    })

    function add() {
        var user_name = document.getElementById("user_name").value;
        var user_phone = document.getElementById("user_phone").value;
        var sheng = document.getElementById("province").value;
        var shi = document.getElementById("city").value;
        var qu = document.getElementById("district").value;
        var user_intro = document.getElementById("user_intro").value;

        $.post({
            url: "<%= basePath %>static//cntApi/addConsignee.do",
            data: {
                "user_name": user_name,
                "user_phone": user_phone,
                "sheng": sheng,
                "shi": shi,
                "qu": qu,
                "user_intro": user_intro,
            },
            dataType: "json",
            /*async : false,*/
            success: function (date) {
                alert("添加成功");
                window.location.reload();
            },
            else: function () {

            }
        });

    }

    function delClick(rowId) {
        if (window.confirm("是否删除该地址？")) {
            window.location.href = "cntApi/delConsignee?caId=" + rowId;
        }

    }

    function isDefaultAddr(customerAddrId) {
        window.location.href = "cntApi/isDefaultAddr?customerAddrId=" + customerAddrId;
    }

    function openDialog(addId) {
        window.location.href = "cntApi/consigneeByAdd?caId=" + addId;
    };
</script>
</html>